<script setup lang="ts">
import { createClass } from '@/api/class';
import { Cls } from '@/api/class/type';
import Header from '@/components/Header.vue';
import { router } from '@/router';
import { Result } from '@/utils/request';
import { showToast } from 'vant';
import { Numeric } from 'vant/lib/utils';
import { ref } from 'vue';
const formData = ref({} as Cls);
const onSubmit = () => {
    createClass(formData.value).then((res) => {
        const {msg} = res as Result;
        showToast({
            message: msg,
            type: 'success'
        })
        router.back();
    })
}

const showPicker = ref(false);
const pickerValue = ref<Numeric[]>([]);
const columns = [
    { text: '大班', value: 'Hangzhou' },
    { text: '中班', value: 'Ningbo' },
    { text: '小班', value: 'Wenzhou' },
] as Columns[];
const onConfirm = ({ selectedValues, selectedOptions} : { selectedValues: Numeric[], selectedOptions: Columns[]}) => {
    showPicker.value = false;
    pickerValue.value = selectedValues;
    formData.value.grade = selectedOptions[0].text;
};
type Columns = {
    text: string, value: string
}
</script>

<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <van-form @submit="onSubmit">
                 <van-cell-group inset>
                    <van-field
                        v-model="formData.grade"
                        is-link
                        readonly
                        label="年级"
                        placeholder="选择年级"
                        @click="showPicker = true"
                    />
                </van-cell-group>
                <van-cell-group inset>
                    <van-field
                        v-model="formData.name"
                        name="name"
                        label="班级名"
                        placeholder="请输入班级名"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    创建
                    </van-button>
                </div>
            </van-form>
        </div>
        <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
            <van-picker
                :model-value="pickerValue"
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
            />
        </van-popup>   
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    .content {
        margin-top: 3%;
    }
}
</style>